<!--
 * @Author: Wang WeiHao
 * @Date: 2024-10-15 09:52:01
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-10-22 11:11:45
 * @Description: 
 * @FilePath: \geo-base-dm\src\views\main\ai-processing\right-legendShp.vue
-->
<template>
	<div class="legend" :class="isHidden ? 'hidden-pannel' : ''">
		<div class="hidden-btn" @click="isHidden = !isHidden"></div>
		<div class="title">图例</div>
		<div class="split"></div>
		<div class="color-container" v-show="!isHidden">
			<div v-for="(item, key) in filterTask" :key="key" class="color-item">
				<div class="color" :style="{ backgroundColor: item.fillColor }"></div>
				<div class="label">{{ translateInterpreTypelegend(key.toString()) }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { translateInterpreTypelegend } from "@/utils/tsTools";
import { useTaskStore } from "@/store";
const isHidden = ref(false);
const taskStore = useTaskStore();
const getTaskType = ref(
	"sqst,qlst,pyst,pdst,tdst,sqhd,qlhd,pyhd,pdhd,tdhd,yld,gml,sld,qtld,ycl,yl,gfgcd,zfgcd,dfgcd,hl,hp,skkt,bcxd,tt,td,hy,csyd,lcjzd,qtjsyd,gfyd,ckyd,sd,gb,yjd,zzd,ltd,lysld,qt"
);
const getTaskTypeall = computed(() => {
	let filterObj = base_config.value.vectorlegend;
	for (const key of filterObj) {
		console.log(key);
	}
	return filterObj;
});
let base_config = ref(BASE_CONFIG);
// 默认展示base_config的内容,在getTaskType有值的时候，展示getTaskType的筛选后的内容
const filterTask = computed(() => {
	console.log(getTaskType.value);
	console.log(base_config.value);

	let filterObj: (typeof BASE_CONFIG)["vectorlegend"] = {};
	for (const key of getTaskType.value.split(",")) {
		filterObj[key] = base_config.value.vectorlegend[key];
	}

	return filterObj;
});
// onMounted(() => {
// 	let filterObj = base_config.value.vectorlegend;
// 	for (const key of filterObj) {
// 		console.log(key);
// 	}
// });
</script>

<style lang="scss" scoped>
.legend {
	@apply fixed bottom-14 right-5 z-20;
	width: 580px;
	// height: 578px;
	background: rgba(6, 19, 44, 0.8);
	border-radius: 4px;
	border: 1px solid #76c6ff;
	.hidden-btn {
		@apply absolute m-auto cursor-pointer;
		width: 21px;
		transform: rotate(270deg);
		height: 97px;
		left: 50%;
		top: -60px;
		background-image: url("@img/main/hidden-on.png");
	}
	&.hidden-pannel .hidden-btn {
		background-image: url("@img/main/hidden-off.png");
	}
}

.title {
	height: 32px;
	line-height: 32px;
	padding-left: 9px;
	font-size: 14px;
	color: #76c6ff;
}
.split {
	height: 1px;
	background: #76c6ff;
}
.color-container {
	@apply grid grid-cols-5 pt-2;
	.color-item {
		@apply flex items-center;
		height: 24px;
		margin-left: 6px;
		&:not(:last-child) {
			margin-bottom: 4px;
		}
		.color {
			width: 10px;
			height: 10px;
			background: #fff;
			margin-right: 12px;
		}
		.label {
			font-size: 12px;
			color: #fff;
		}
	}
}
</style>
